<template>
    <view class="content">
        <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft" :style="searchRight"
            id="navBar">
            <van-icon name="search" slot="right" @click="onSearch" v-if="isOrder && !loading" />
        </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" id="scroller"
            show-scrollbar="false" @scrolltolower="scrolltolower">
            <view class="wrapper">
                <view class="cartAd_title" id="cartAdTitle">我的订单</view>
                <!-- <view class="wrapper_content"> -->
                <van-tabs :swipeable="true" :sticky="true" :active="activeTab" @click="changeTab" animated lazy-render
                    line-width="20px" color="#FF6203" :ellipsis="false" title-inactive-color="#737373"
                    title-active-color="#333333" isFixed="true" :swipe-threshold="4" :offset-top="offsetTop"
                    :scroll-top="scrollTop" z-index="4" id="van_tabs" scroll-threshold="0" :border="false">
                    <van-tab v-for="(tab, index) in tabList" :title="tab.typeName" :key="index">
                        <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading>
                        <view v-show="!loadingIsShow ">
                            <view class="orderList_box" v-if="isOrder" >
                                <template>
                                    <van-checkbox-group ref="checkboxGroup" :value="checked" :checked="checked"
                                        @change="handleCheck">
                                        <view class="order-list-container" style="position: relative; ">
                                            <view class="orderList_bg" v-for="(item, val) in orderList" :key="val"
                                                :id="item.orderId">
                                                <view class="orderList">
                                                    <view class="orderTop">
                                                        <van-checkbox v-model="item.isChecked" shape="round" v-if="showMark"
                                                            @click.stop="onChange('单选', item)" :label-disabled="false"
                                                            :disabled="item.isXiajia === true && item.isChecked === false ? true : false"
                                                            use-icon-slot>
                                                            <image :src="item.isChecked ? activeIcon : inactiveIcon"
                                                                @click.stop="onChange('单选', item)" slot="icon"
                                                                class="checked-img" style="height: 16px;width: 16px;" />
                                                        </van-checkbox>
                                                        <view class="orderTopRight">
                                                            <view class="listTop" @click="toOrderDetail(item, item.orderNo, item.orderStatus)">
                                                                <view class="listTopLeft" v-if="activeTab!==5">订单编号：{{ item.orderNo }}</view>
                                                                <view class="listTopRight" v-if="activeTab!==5"> {{getOrderStatusText(item.orderStatus)}} </view>
                                                                <view class="listTopRight" v-if="activeTab==5"> {{getAfterSaleOrderTypeText(item.afterSalesType)}}
                                                                </view>
                                                            </view>
                                                        </view>
                                                    </view>
                                                    <view class="goodsDetail">
                                                        <template v-if="item.orderProducts.length === 1">
                                                            <view class="wraper_left"
                                                                v-for="(goods, goodsIndex) in item.orderProducts"
                                                                :key="goodsIndex" :id="goods.productId"
                                                                @click="toOrderDetail(item, item.orderNo, item.orderStatus)">
                                                                <view class="wraper_products_info">
                                                                    <view class="goodsPic">
                                                                        <img class="img" :src="goods.imgUrl" mode="widthFix" />
                                                                        <!-- <image :lazy-load="true" :placeholder="defaultIcon" :src="goods.imgUrl"
                                                                            @load="handleImageLoad($event, val, goods)"
                                                                            :style="{opacity: goods.imageLoaded ? 1 : 0}"
                                                                            @error="handleImageError($event, val, goods)"
                                                                            :onerror="defaultIcon" mode="widthFix" />
                                                                        <image v-if="!goods.imageLoaded" :src="defaultIcon" mode="widthFix" /> -->
                                                                    </view>
                                                                    <view class="goodsText">
                                                                        <view class="goodsText_top">
                                                                            <view class="goodsTop">
                                                                                <view class="goods_T">{{ goods.productName }} </view>
                                                                                <view class="goods_price">X {{ goods.num }} </view>
                                                                            </view>
                                                                            <view class="goodsMiddle">
                                                                                <view class="goods_specs">{{ goods.productAttrName ? goods.productAttrName : '默认' }} </view>
                                                                                <!-- <view class="goods_num">X {{ goods.num }}</view> -->
                                                                            </view>
                                                                        </view>
                                                                        <view class="goodsText_bottom">
                                                                            <view class="jifen_box" v-if="orderStatus == 8 || activeTab == 5" style="width: 100%;">
                                                                                <span>退款：</span><span v-if="item.refundAmount">￥{{ item.refundAmount }}</span> 
                                                                                <span v-if="item.refundPoints">
                                                                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png" alt="" style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;padding: 0;" />
                                                                                    {{ item.refundPoints }}</span>
                                                                            </view>
                                                                            <view class="productActualTotalPay jifen_box" v-else>
                                                                                <span v-if="item.actualTotalPayAmount && Number(item.actualTotalPayAmount) !== 0" style="margin-right: 16rpx;">￥{{ item.actualTotalPayAmount }}</span>
                                                                                <span v-if="item.actualTotalPayPoints && Number(item.actualTotalPayPoints) !== 0"><img
                                                                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                                                                        alt=""
                                                                                        style="height: 10px; width: 10px;margin-left: 6px;margin-right: 6px;padding: 0;" />
                                                                                    {{ item.actualTotalPayPoints }}</span>
                                                                            </view>
                                                                            <!-- 按钮去掉了 -->
                                                                            <!-- <view class="judgeBtn" v-if="item.orderStatus == 2"> 去评价 </view> -->
                                                                        </view>
                                                                    </view>
                                                                </view>
                                                            </view>
                                                        </template>
                                                        <template v-if="item.orderProducts.length > 1">
                                                            <view class="goodsDetailInfo_wrapper"
                                                                @click="toOrderDetail(item, item.orderNo, item.orderStatus)">
                                                                <view class="goodsListWrapper">
                                                                    <scroll-view class="top-menu-view hotSale_content"
                                                                        scroll-x="true" show-scrollbar="false"
                                                                        :class="(swiperCurrent + 1) === item.orderProducts.length ? 'last-top-menu-view' : ''"
                                                                        :scroll-into-view="tabCurrent"
                                                                        :scroll-with-animation="true"
                                                                        >
                                                                        <view class="shangpinList"
                                                                            v-for="(goods, goodsIndex) in item.orderProducts.slice(0,activeTab === 5 ? 3 : 5)" :id="'tabNum' + (goodsIndex + 1)" :key="goodsIndex">
                                                                            <view class="renqi_img"> 
                                                                                <img :src="goods.imgUrl" alt="" mode="widthFix">
                                                                                <template v-if="activeTab!==5">
                                                                                    <view class="status_tips" v-if="goodsIndex===4" @click="toOrderDetail(item, item.orderNo, item.orderStatus)"> 查看全部</view>
                                                                                </template>
                                                                                <template v-else>
                                                                                    <view class="status_tips" v-if="goodsIndex==3" @click="toOrderDetail(item, item.orderNo, item.orderStatus)"> 查看全部</view>
                                                                                </template>
                                                                            </view>
                                                                        </view>
                                                                    </scroll-view>
                                                                </view>
                                                                <view class="goodsListText" v-if="activeTab!==5 && orderStatus!==8">
                                                                    <view class="goods_price">￥{{item.actualTotalPayAmount  }}</view>
                                                                    <view class="goods_num">共{{ item.orderProducts.length }}件 </view>
                                                                </view>
                                                                <view class="goodsListText" style="width: 28%;" v-else>
                                                                    <view class="goods_price" style="display: flex; align-items: center;">退款：<span v-if="item.refundAmount && item.refundAmount!=='0'">￥{{item.refundAmount }}</span> <span v-if="item.refundPoints && item.refundPoints!=='0'">{{item.refundPoints}}</span>
                                                                    </view>
                                                                    <view class="goods_num">共{{ item.orderProducts.length }}件 </view>
                                                                </view>
                                                            </view>
                                                        </template>
                                                    </view>
                                                    <!-- 物流 -->
                                                    <template v-if="item.orderType !== 1">
                                                        <template v-if="item.orderStatus !== 5 && item.orderStatus !==8">
                                                            <!-- 已完成付款的物流 -->
                                                            <view class="logistics" @click="toLogisticsDetail(item)"
                                                                v-if="item.orderStatus !== 4 && (item.logisticStatus || item.latestLogisticInfo)">
                                                                <view style="padding: 0rpx;"><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/logistics.png"
                                                                    alt="" style="width: 38rpx; height: 28rpx;"></view>
                                                                <view class="logistics_status">
                                                                    <span v-if="item.logisticStatus" style="font-weight: bold;margin-right: 10rpx;"> {{ formatLogisticStatus(item.logisticStatus) }}</span>
                                                                    <span v-if="item.latestLogisticInfo">{{ item.latestLogisticInfo }} </span>
                                                                </view>
                                                            </view>
                                                            <!-- 待付款 -->
                                                            <view class="logistics" @click="toLogisticsDetail(item)"
                                                                v-if="item.orderStatus == 4 && item.orderProductUserBuyNum && item.orderProductUserBuyNum>0">
                                                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/clock.png"
                                                                    alt="" style="width: 28rpx; height: 28rpx;">
                                                                <view class="logistics_detail">
                                                                    <span style="color:#FF6203;">{{ item.orderProductUserBuyNum }}</span> 人刚刚购买
                                                                </view>
                                                            </view>
                                                        </template>
                                                        <view v-if="orderStatus == 8 || activeTab == 5" class="logistics" style="display: flex; align-items: center;" @click="toRefundOrderDetail(item)">
                                                            <view class="afterSaleStatus" style="color: #FF6203;">  {{getAfterSaleOrderListStatusText(item.afterSalesListStatus)}} </view>
                                                            <template v-if="item.afterSalesListStatus==1">
                                                                <view class="refundPocess_detail" style="color: #111111;"> {{getAfterSalesProcessStatusText(item.mpAfterSalesStatus)}} </view>
                                                            </template>
                                                            <template v-if="item.afterSalesListStatus==2">
                                                                <view class="refundPocess_detail" style="display: flex; align-items: center;"> 退款金额 <span>￥{{ item.refundAmount?item.refundAmount:0 }} </span> 
                                                                    <view style="display: flex; align-items: center;">
                                                                        <view style="margin-left:12rpx;">+</view>
                                                                        <view style="width: 22rpx;text-align: center;padding: 0rpx;margin-left:12rpx;margin-right:12rpx;display: flex;align-items: center; justify-content: center;"><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png" alt="" style="height: 20rpx; width: 20rpx;padding: 0;" /></view>
                                                                        <view style="">{{ item.refundPoints? item.refundPoints: 0 }}</view>
                                                                    </view>
                                                                </view>
                                                            </template>
                                                            <template v-if="item.afterSalesListStatus==3">
                                                                <view class="refundPocess_detail" style="color: #111111;">退款关闭 </view>
                                                            </template>
                                                        </view>
                                                    </template>
                                                    <view class="btnArea">
                                                        <view class="btnAreaLeft" style="position: relative; width:50rpx;">
                                                            <view @click="popover(item.orderNo,item)" class="moreButton"
                                                                v-if="orderStatus!==8 && activeTab!==5 &&( (item.orderType=='1'&& item.orderStatus == 4) || (item.orderType =='0' && item.orderStatus!==5  && item.orderStatus!==7) )">
                                                                更多 </view>
                                                            <view class="bubble_card"
                                                                v-if="current === item.orderNo && popoverShow"
                                                                :style="{top: bubbleTop + 'px', left: bubbleLeft + 'px',}">
                                                                <view class="bubble-content">
                                                                    <!-- <view class="popup-text borderbottom"
                                                                        v-if="item.orderStatus !==4 && item.orderStatus!==5"
                                                                        @click="showTaxInvoice"
                                                                        :class="{'activePopup':popupCurrent==0 && (current === item.orderNo && popoverShow)}">
                                                                        申请开票</view> -->
                                                                    <!-- 待付款以及实物商品待发货时显示 -->
                                                                    <view class="popup-text" @click="cancelOrder(item)"
                                                                        v-if="item.orderStatus == 4 || (item.orderStatus == 0 && item.orderType == 0)"
                                                                        :class="{'activePopup':popupCurrent==1 && (current === item.orderNo && popoverShow)}">
                                                                        取消订单</view>
                                                                    <!-- 实物商品未取消 以及服务商品已付款时显示 -->
                                                                    <view class="popup-text" @click="delOrder(item.orderId)"
                                                                        v-if="item.orderType == 0 && item.orderStatus !== 5"
                                                                        :class="{ 'activePopup': popupCurrent == 2 && (current === item.orderNo && popoverShow) }">
                                                                        删除订单</view>
                                                                </view>
                                                            </view>
                                                        </view>
                                                        <!-- 售后的-->
                                                        <template v-if="activeTab == 5 || orderStatus == 8">
                                                            <view class="btnAreaRight" v-if="orderStatus == 8 || activeTab">
                                                                <button type="default" plain class="blackBlackBtn" @click="delAfterSaleOrderRecord(item.afterSalesId,item)">删除记录</button>
                                                            </view>
                                                        </template>
                                                        <template v-else>
                                                            <template v-if="item.orderType=='0'">
                                                                <!-- 待发货 -->
                                                                <view class="btnAreaRight" v-if="item.orderStatus == 0">
                                                                    <button type="default" plain class="blackBlackBtn r12" @click="toLogisticsDetail(item)">查看物流</button>
                                                                    <button type="default" plain class="blackBlackBtn" @click="changeAddress(0,item.orderStatus,item.orderId)">修改地址</button>
                                                                </view>
                                                                <!-- 待收货 -->
                                                                <view class="btnAreaRight"
                                                                    v-if="item.orderStatus == '1' || (item.orderStatus =='10'&& activeTab!==5)">
                                                                    <button type="default" plain class="blackBlackBtn r12" @click="toLogisticsDetail(item)">查看物流</button>
                                                                    <button type="default" plain class="blackBlackBtn" @click="openCheckShouhuo(item)">确认收货</button>
                                                                </view>
                                                                <!-- 待评价 -->
                                                                <view class="btnAreaRight" v-if="item.orderStatus == '2'">
                                                                    <button type="default" plain class="blackBlackBtn r12"  @click="toLogisticsDetail(item)">查看物流</button>
                                                                    <button type="default" plain class="blackBlackBtn r12" @click="addToCart(item)">再次购买</button>
                                                                    <button type="default" plain class="blackBlackBtn" @click="toJudge(item)">去评价</button>
                                                                </view>
                                                                <!-- 已完成 -->
                                                                <view class="btnAreaRight" v-if="item.orderStatus == '3'">
                                                                    <button type="default" plain class="blackBlackBtn " :class="{'r12':item.isCommentFollowups==1}" @click="toLogisticsDetail(item)">查看物流</button>
                                                                    <button type="default" plain class="blackBlackBtn"  @click="toFollowUpJudge(item)"  v-if="item.isCommentFollowups=='1'">去追评</button>
                                                                </view>
                                                                <!-- 待付款 -->
                                                                <view class="btnAreaRight" v-if="item.orderStatus == '4'">
                                                                    <button type="default" plain class="blackBlackBtn r12"  @click="addToCart(item)">加入购物车</button>
                                                                    <button type="default" plain class="blackBlackBtn r12"  @click="changeAddress(0,item.orderStatus,item.orderId)">修改地址</button>
                                                                    <!-- <button type="default" plain class="submitBtn" @click="toPayment(item.orderNo)">继续付款</button> -->
                                                                    <button type="default" plain class="blackBlackBtn" @click="toPayment(item)">继续付款</button>
                                                                </view>
                                                                <!-- 交易关闭 -->
                                                                <view class="btnAreaRight"  v-if="item.orderStatus == '5' || item.orderStatus == '7'">
                                                                    <button type="default" plain class="blackBlackBtn r12"  @click="delOrder(item.orderId)">删除订单</button>
                                                                    <button type="default" plain class="blackBlackBtn"  @click="addToCart(item)">再次购买</button>
                                                                </view>

                                                            </template>
                                                            <!-- 服务商品 -->
                                                            <template v-if="item.orderType=='1'">
                                                                <!-- 待付款 -->
                                                                <view class="btnAreaRight">
                                                                    <button type="default" plain class="blackBlackBtn r12" @click="delOrder(item.orderId)" v-if="Number(item.orderStatus)!==6">删除订单</button>
                                                                    <button type="default" v-if="Number(item.orderStatus) == 4" plain class="blackBlackBtn" @click="toPayment(item)">去付款</button>
                                                                    <button type="default" v-if="Number(item.orderStatus)== 6 || Number(item.orderStatus) == 0"  plain class="blackBlackBtn" :class="{'r12':Number(item.orderStatus)==6}"  @click="toUseService">去使用</button>
                                                                    <button type="default" v-if="Number(item.orderStatus) == 7 || Number(item.orderStatus) == 5 || Number(item.orderStatus) == 3 || Number(item.orderStatus)==6 " plain class="blackBlackBtn"  @click="submitAnotherOrder(item)">再次购买</button>
                                                                </view>
                                                                <!-- <view class="btnAreaRight" v-if="item.orderStatus == '5' || item.orderStatus == '3' ">
                                                                    <button type="default" plain class="blackBlackBtn r12" @click="delOrder(item.orderId)">删除订单</button>
                                                                    <button type="default" plain class="blackBlackBtn" @click="addToCart()">再次购买</button>
                                                                </view>
                                                                <view class="btnAreaRight" v-if="item.orderStatus == 6  ">
                                                                    <button type="default" plain class="blackBlackBtn r12" @click="delOrder(item.orderId)">删除订单</button>
                                                                    <button type="default" plain class="blackBlackBtn" @click="toUseService">去使用</button>
                                                                </view> -->
                                                            </template>
                                                        </template>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </van-checkbox-group>
                                    <view v-if="loading" class="loading-text">正在加载...</view>
                                    <view v-if="finished" class="no-more-text">没有更多了</view>
                                    <!-- <view class="loading-more" v-if="orderList.length > 0">
                                        <text v-if="hasMore">正在加载更多...</text>
                                        <text v-else>没有更多数据了</text>
                                    </view> -->
                                </template>
                            </view>
                        </view>
                        <view v-show="!loadingIsShow ">
                            <view class="noOrderwrapper" v-if="!isOrder">
                                <view class="noOrderPic">
                                    <van-empty class="custom-image"
                                        image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noOrder.png" />
                                </view>
                                <view class="orderTip" style="font-size: 32rpx; font-weight: normal;">您还没有相关订单</view>
                            </view>
                        </view>
                    </van-tab>
                </van-tabs>
                <view class="bottom" style="padding-top:32rpx;" v-if="activeTab===1 && selectedRows.length>0">
                    <van-button type="info" @click="combinePayment">合并付款</van-button>
                </view>
            </view>
            <view class="noOrderwrapper" v-if="!isOrder && orderStatus == -1">
                <view class="noOrderPic">
                    <van-empty class="custom-image"
                        image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noOrder.png" />
                </view>
                <view class="orderTip">还没有订单</view>
                <view class="description">
                    <view>当您完成了一次愉快的购物之后</view>
                    <view>您将在这里看到它</view>
                </view>
                <view class="noOrderBtn-area">
                    <button plain class="checkBtn" @click="lookAroundBtn">去逛逛</button>
                </view>
            </view>
        </scroll-view>
        <van-toast id="van-toast" />
        <van-dialog id="van-dialog" confirm-button-color='#ff6203' />
        <is-shouhuo-popup :show="isShouhuo" @closeShouhuo="closeShouhuo" @confirmShouhuo="confirmShouhuo" :orderId="orderId"></is-shouhuo-popup>
        <cancelOrder :show="cancelPopup" @closeCancelPopup="closeCancelPopup" :orderId="orderId" :orderType="orderType" ></cancelOrder>
    </view>
</template>
<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import Dialog from '@/wxcomponents/vant/dialog/dialog'
import loading from '@/mycomponents/loading.vue'

import isShouhuoPopup from '@/mycomponents/shangcheng/isShouhuoPopup.vue'
import cancelOrder from '@/mycomponents/shangcheng/cancelOrder.vue'
import {getMyOrderListApi,deleteOrderApi,cancelOrderApi,getOrderDetailApi,batchAddToShoppingCartApi,deleteAfterSalesOrderApi} from '@/api/order'
import { SOURCE_TYPE } from '@/utils/constant'

export default {

    props: {

    },
    components: {
        isShouhuoPopup,
        cancelOrder,
        loading
    },
    data () {
        return {
            defaultIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultIcon.png',

            isrefresher: false,
            loadingIsShow: true,
            loadingIsShowPage: true,
            offsetTop:0,  // van-tab 吸顶的偏移量
            scrollTop:0,
            navBarTitle: '我的订单',
            navBarHeight: 0,  // navbar 的高度
            titleHeight:0 , //标题的高度
            wrapperStyle:0,
            scrolling: false, // 是否正在滚动
            // loading:true,
            activeTab: 0,
            sticky: true,
            showMark: false, // 标记
            isShouhuo: false,
            //一个订单多个商品手写轮播图
            swiperCurrent: 0,
            tabCurrent: 'tabNum1',
            tabList: [
                { typeId: 0, typeName: '全部' },
                { typeId: 1, typeName: '待付款' },
                { typeId: 2, typeName: '待发货' },
                { typeId: 3, typeName: '待收货/待使用' },
                { typeId: 4, typeName: '待评价' },
                { typeId: 5, typeName: '售后/退款'  }
            ],
            isOrder: true,
            orderList: [ ],
            select:true,
            // 待付款  复选框
            checked: [],
            checkAll: false, // 标记是否全选
            selectedRowKeys: [], // 已选择的数据的id
            selectedRows: [], // 已选择的数据
            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',
            isShowBlue: false,

            // handlePopup: false,
            popupContent: '这是气泡内容',
            records:[],//存所有的数据
            list: [],
            menuButtonWidth:'',
            searchRight:'',
            params:{},
            source:SOURCE_TYPE.ORDER,
            showPopover:'true',
            actions : [
                { text: '选项一' },
                { text: '选项二' },
                { text: '选项三' },
            ],
            orderStatus:-1,
            isPopupVisible: false,
            popoverShow: false,
            // openCheckShouhuo: false, // 标记是否确认收货
            current: 0,
            bubbleTop: 0,
            bubbleLeft: 0,
            popupDisplay:'none',
            popupCurrent:-1,  //弹窗里面的选项
            cancelPopup:false, //取消订单原因弹窗
            cacheData: {}, // 新增缓存标记对象
            orderId:'',//订单id
            cancelParams:{},
            orderType:0,//订单类型 0 实物商品 1 服务商品 取消时需要用到
            sourceType:'mine',
            // 新增分页参数
            pageNum: 1,
            pageSize: 10,
            totalPages: 0,
            hasMore: true,
            total: 0,
            loading: false,
            finished: false,
            scrollTop: 0, // 新增：用于存储滚动位置
            afterSalesStatusText:{
                0: "提交申请",
                1: "平台审核中",  //平台审核
                2: "待送自提点",
                3: "平台处理中",
                4: "已完成",
                5: "申请平台未通过", //拒绝申请
                6: "已撤销，退款关闭" //取消申请
            },
            emptyData:false, //
        }
    },

    computed: {},
    watch: {
        orderList: {
            handler (val) {
                console.log(val)
                if (!this.select) { //
                    var i = 0
                    this.orderList.forEach(item => {
                        if (item.isChecked === true) {
                            i++
                        }
                        if (i === this.orderList.length) { // 不需要过滤 下架或售罄商品
                            this.checkAll = true
                        } else {
                            this.checkAll = false
                        }
                    })
                }
            },
            deep: true
        },

        checked: {
            handler (val) {
                console.log(val, 'newName')
            }
        },
        selectedRowKeys: {
            handler (val) {
                console.log(val, 'selectedRowKeys')
                if (val.length > 0) {
                    this.isShowBlue = true // 标记为正常的按钮  深蓝色
                } else {
                    this.isShowBlue = false // 标记为正常的按钮  浅蓝色
                }
            }
        },
        selectedRows: {
            handler (val) {
                console.log(val, 'selectedRows')
            }
        }
    },
    computed: {
        orderStatusText() {
            const map = {
                '-1': '全部订单',
                '0': '待发货',
                '1': '待收货',
                '2': '已收货，待评价',
                '3': '已完成',
                '4': '待付款',
                '5': '已取消',
                '6': '待使用',
                '7': '交易关闭',
                '8': '售后/退款',
                '9': '已删除',
                '10': '待收货',
            }
            return map[this.orderStatus?.toString()] || '未知状态'
        },
    },
    onLoad (data) { 
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        this.menuButtonWidth = menuButtonInfo?.width || 0
        this.searchRight='padding-right:'+ ( this.menuButtonWidth + 5 ) +'px' 
        console.log(this.menuButtonWidth,'menuButtonWidth',this.searchRight,'searchRight')
     
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            this.activeTab=this.params.activeTab
            this.showMark= this.activeTab===1
            this.orderStatus = this.params.orderStatus
        }else{
            this.orderStatus = -1
            this.activeTab = 0
        }
        this.getNavBarHeight()
        this.getTitleHeight()
    },
    onReady () {},
    onShow(){
        console.log(this.source,'source')
        uni.setStorage({
            key: 'pageSource',
            data: this.source
        });
        this.loading = false
        this.finished = false
        this.hasMore = true
        this.pageNum = 1
        this.total = 0
        this.orderList = []
        console.log(this.orderStatus,'orderStatus',this.activeTab,'activeTab')
        // this.getMyOrderList()
        this.onRefresherMethod()
        // 在数据准备好后获取标题高度
        this.$nextTick(() => {
            this.getTitleHeight()
        })
    },

    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            // 监听滚动事件
            const scrollTop = e.detail.scrollTop;
            this.scrollTop = scrollTop; // 新增：更新滚动位置
            this.scrolling = scrollTop > 0; // 如果滚动距离大于 0，设置 scrolling 为 true
            if (scrollTop > 50) {
                this.offsetTop = this.navBarHeight;
            } else {
                this.offsetTop = 0;
            }
        },
        // 返回键
        onClickLeft () {
            if (getApp().globalData.fromEarnPoints = true && getApp().globalData.taskType == 'comment_product') {
                getApp().globalData.fromEarnPoints = false
                getApp().globalData.taskType = ''
                getApp().globalData.currentTask = ''
            }
            uni.reLaunch({
                url: '/pages/my/mine'
            })
        },
        scrolltolower() {
            console.log('触底了')
            if (!this.finished) {
                // this.pageNum++
                this.getMyOrderList(true)
            }

            // if (this.total <= this.orderList.length) {
            //     this.isLoadAll = true
            //     this.loadingText = '没有更多数据啦~'
            //     this.hasMore = false
            // } else {
            //     this.pageNum++
            //     this.hasMore = true
            //     this.isLoadAll = true
            //     this.loadingText = '加载中...'
            //     this.getMyOrderList(true)
            // }
        },

        onRefresherMethod() {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }
            Promise.all([this.getMyOrderList()]).then(() => {
                console.log('所有api加载完成')
                this.loadingIsShow = false
                this.loadingIsShowPage = false
                // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
                this.time = setTimeout(e => {
                    this.isrefresher = false
                }, 2000)
            })
            .catch(error => {
                this.loadingIsShow = false
                this.time = setTimeout(e => {
                    this.isrefresher = false
                }, 3000)
                // 处理任何一个 Promise 失败的情况
                console.error('获取数据失败:', error);
            });
        },


        //navBar高度
        getNavBarHeight() {
            const query = wx.createSelectorQuery();
            query.select('#navBar').boundingClientRect((navRes) => {
                if (navRes) {
                    this.navBarHeight = navRes.height || 0;
                    this.offsetTop = navRes.height || 0; // 直接同步到吸顶位置
                    console.log(this.offsetTop,'offsetTop',this.navBarHeight)
                   
                }
            }).exec();
           
        },
        getTitleHeight() {
            const query = wx.createSelectorQuery();
            query.select('#cartAdTitle').boundingClientRect((res) => {
                if (res) {
                    this.titleHeight = res.height;
                    console.log(this.titleHeight,'titleHeight')
                }
            }).exec();
        },
        handleImageError(event, index, item) {
            item.image = this.defaultIcon;
            event.target.src = this.defaultIcon;
            this.$set(item, 'imageLoaded', true);
        },
        handleImageLoad(e, index, item) {
            this.$set(item, 'imageLoaded', true);
        },

        // 继续逛逛
        lookAroundBtn () {
            const params = {}
            params.biaoshi = 'order'
            wx.switchTab({ url: '/pages/surprise/index' })
        },
        // 新增物流状态转换方法
        formatLogisticStatus(status) {
            const map = {
                'ORDER_PAID': '已下单',
                'ORDER_CREATED': '已下单',
                'PROCESSING': '仓库处理中',
                'WAREHOUSE_PROCESSING': '仓库处理中',
                'IN_TRANSIT': '运输中',
                'ARRIVED': '已到达自提点',
                'ARRIVED_AT_PICKUP_POINT': '已到达自提点',
                'DELIVERED': '已签收',
                'PICKED_UP': '已签收',
                'CANCELLED': '已取消',
            };
            return map[status] || status; // 保留未知状态原样显示
        },
        getAfterSaleOrderListStatusText(status) {     /** 售后单列表状态 1=退款中 2=退款成功 3=退款关闭**/
            switch (status?.toString()) {
                case '1': return '退款中';
                case '2': return '退款成功';
                case '3': return '退款关闭';
                default: return '未知状态';
            }
        },
        //状态码转换方法
        getOrderStatusText(status) {
            switch (status?.toString()) {
                case '-1': return '全部订单';
                case '0': return '待发货';
                case '1': return '待收货';
                case '2': return '已收货，待评价';
                case '3': return '已完成';
                case '4': return '等待买家付款';
                case '5': return '交易关闭'; //已取消，交易关闭
                case '6': return '待使用';
                case '7': return '交易关闭'; //待支付 超时未支付  申请售后成功
                case '8': return '退款/售后';
                case '9': return '已删除';  //订单已删除
                case '10': return '待收货';  //已签收的状态   但是订单是还未确认收货的状态  所以实质上是跟待收货一样的
                default: return '未知状态';
            }
        },
        // 售后订单状态转码  /** 售后单类型 1=退货退款2=退款**/

        getAfterSaleOrderTypeText(status) {
            switch (status?.toString()) {
                case '1': return '退货退款';
                case '2': return '退款';
                case '3': return '其他';
                case '4': return '服务退款';
                default: return '未知状态';
            }
        },
        getAfterSalesProcessStatusText(status){
            return this.afterSalesStatusText[status] || status; // 保留未知状态原样显示
        },

        // 售后单详情
        toRefundOrderDetail(item){
             const params = {
                orderId:item.orderId,
                orderStatus:item.orderStatus,
                afterSalesId:item.afterSalesId,
                afterSalesType:item.afterSalesType,
            }
            uni.navigateTo({ url: '/pages/orders/refundOrderDetail?params=' + encodeURIComponent(JSON.stringify(params)) })
        },


        // 一个订单多个商品 轮播展示
        lookInfo(index,e,item){
			this.swiperCurrent = index
            console.log(index, item, '组件', this.tabCurrent, 'tabCurrent++', this.swiperCurrent)
		},

        changeTab (e) {
            // 重置分页参数
            this.pageNum = 1
            this.hasMore = true
            this.orderList = []
            this.$nextTick(() => {
                wx.pageScrollTo({
                    scrollTop: 0,
                    duration: 0
                });
            });
            const index = e.detail.index
            if (this.activeTab === index) return
            this.activeTab = index
            // 重置气泡卡片状态
            this.popoverShow = false
            this.current = 0
            this.popupCurrent = -1

            if (index === 1) {
                this.showMark = true
                this.orderList.forEach(item => {
                    this.$set(item, 'isChecked', false)
                })
            } else {
                this.showMark = false
                this.orderList = this.list
            }
            if(this.activeTab===0){
                this.orderStatus=-1 //全部订单
            }else if(this.activeTab===1){
                this.orderStatus=4 //待付款
            }else if(this.activeTab===2){
                this.orderStatus=0 // 待发货
            }else if(this.activeTab===3){
                this.orderStatus=1 //待收货
            }else if(this.activeTab===4){
                this.orderStatus=2 //待评价
            }else if(this.activeTab===5){
                this.orderStatus=8 //售后/退款
            }
            this.loading = false
            this.finished = false
            this.hasMore = true
            this.pageNum = 1
            this.total = 0
            this.orderList = []
            this.getMyOrderList()
        },

        // 更多  气泡卡片
        popover (orderNum,item) {
            // // 关闭其他项的气泡卡片
            this.orderList.forEach(i => {
                if (i.orderNum !== orderNum) {
                    i.flag = false;
                }
            });
            if ([4, 0].includes(item.orderStatus)) { // 待付款/待发货状态
                this.popupCurrent = 1;  // 对应取消订单项
            } else if (![4, 5].includes(item.orderStatus)) { // 非待付款/售后状态
                this.popupCurrent = 0;  // 对应申请开票项
            }

            item.flag = !item.flag;
            this.popoverShow = !this.popoverShow; // 增加显隐状态切换
            const query = wx.createSelectorQuery().in(this);
            query.select('.moreButton').boundingClientRect((rect) => {
                console.log(rect,'rect------')
                if (!rect) return; // 添加空值判断
                // 添加强制更新DOM的代码
                this.$nextTick(() => {
                    // this.bubbleLeft = rect.left;
                    this.bubbleLeft = 0;
                    // const windowInfo = wx.getWindowInfo();
                    // const bubbleWidth = 180; // 气泡卡片宽度180rpx
                    // const rpx = windowInfo.screenWidth / 750; // rpx转换系数
                    // this.bubbleLeft = rect.left - rect.left + (rect.width - (bubbleWidth * rpx)) / 2;
                    console.log(this.bubbleLeft,'bubbleLeft')
                    this.bubbleTop = 8; // 气泡卡片距离顶部的距离
                })
                this.current = orderNum;
            }).exec();
            this.popupCurrent=-1
        },

        handlePopup () {
            this.handlePopup = !this.handlePopup
        },

        onSelect(){
            console.log('kkkkklllllll')
            showToast(action.text)
        },

        // 跳转商品详情页面
        // 跳转商品详情
        toOrderDetail (item, val, status) {
            console.log(item, val, 'toOrderDetail', status)
            const params = {}
            params.item = item
            params.id = val
            params.orderStatus = status
            params.orderNo = item.orderNo
            params.orderId = item.orderId
            params.source = this.source
            params.afterSalesId = item.afterSalesId
            params.afterSalesType = item.afterSalesType
            params.mpAfterSalesStatus = item.mpAfterSalesStatus
            uni.setStorage({
                key: 'pageSource',
                data: this.source
            });

            // debugger
            if (status == 4) { //待付款
                params.status = 'unpaid'
            } else if (status == 0) { //待发货
                params.status = 'unshipped'
            } else if (status == 1) { //待收货
                params.status = 'unreceived'
            } else if (status == 2) { //待评价
                params.status = 'unrewied'
            } else if (status == 8) { //售后
                params.status = 'refund'
            }
            console.log(this.activeTab, item.orderType, !item.orderType)
            if (this.activeTab == 5) { //售后 未返回orderType
                if (status == 8 || this.orderStatus == 8 || item.afterSalesType) { //售后
                    uni.navigateTo({
                        url:
                            '/pages/orders/refundOrderDetail?params=' +
                            encodeURIComponent(JSON.stringify(params))
                    })
                } 
            }else{ 
                if (item.orderType == '1') {  //服务  待使用服务  6: 待使用
                    uni.navigateTo({
                        url:
                            '/pages/orders/awaitUseService?params=' +
                            encodeURIComponent(JSON.stringify(params))
                    })
                } else if (item.orderType == '0') {
                    //  订单状态（-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款 5: 已取消
                    //  6: 待使用 7:已关闭 8. 售后中(售后退款) 9:已删除 10: 已签收)
                    // if (status == 0 || status == 4 || status == 5) {  //待付款 4 待发货 0 已取消 5（跟付款无关的取消）
                        uni.navigateTo({
                            url:
                                '/pages/orders/orderDetails?params=' +
                                encodeURIComponent(JSON.stringify(params))
                        })
                    // } else {  //待收货1  待评价 2 已完成3  if(status == 2 || status == 1 || status == 3) 10: 已签收
                    //     uni.navigateTo({
                    //         url:
                    //             '/pages/orders/judgeOrderDetail?params=' +
                    //             encodeURIComponent(JSON.stringify(params))
                    //     })
                    // }
                }
            }


        },

        //   跳转 物流详情
        toLogisticsDetail (item) {
            if(item.orderStatus == 4){
                return
            }
            console.log(item.orderStatus, 'toLogisticsDetail')  
            const params = {
                orderNo:item.orderNo,
                orderId:item.orderId,
                orderStatus:item.orderStatus,
                source:this.source
            }
            uni.navigateTo({
                url:
                    '/pages/orders/logisticsDetail?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },

        // 计入购物车   待付款订单
        async addToCart (item) {
            console.log(item, 'addToCart')
            const params = {
                orderId: item.orderId,
                productAttrValueId:item.orderProducts[0].productAttrValueId,
                productAttrName:item.orderProducts[0].productAttrName,
                showSpecsPopup : true,
                
            }
            if (item.orderType === 1) {
               uni.navigateTo({
                    url: '/pages/service/serviceDetail?params=' +
                        encodeURIComponent(JSON.stringify(params))
                })
                return false
            }
            const cartParams = item.orderProducts.map(product => ({
                    cartId: undefined,
                    cartNum: product.num,  // 使用每个商品自己的购买数量
                    cartType: "NORMAL",
                    productAttrValueId: product.productAttrValueId,
                    productId: product.productId,
                    selected: true
                })
            )
            console.log(cartParams, 'addToCart')
            const res = await batchAddToShoppingCartApi(cartParams)
            if (res.code == 200) {
                uni.navigateTo({
                    url: '/pages/shoppingCart/gouwuche?params=' +
                        encodeURIComponent(JSON.stringify(params))
                })
                wx.showToast({
                    title: '加入购物车成功',
                    icon: 'none',
                    duration: 2000
                })
            }
        },

        // 服务商品 再次购买 
        submitAnotherOrder(item) {
          const params = {
            orderId: item.orderId,
            source: this.source,
            pageSymbol:'serviceGoods',
            productId: item.orderProducts[0].productId,
          }
          // params.showSpecsPopup = true
          uni.navigateTo({
            url: '/pages/service/serviceDetail?params=' +
              encodeURIComponent(JSON.stringify(params))
          })
        },

        /** 
         * 待付款 
        */   
        // 修改地址
        changeAddress (val,status,orderId) {
            const params = {
                house:val,
                myHouse:true,
                orderStatus:status,
                orderId:orderId,
                source:this.source
            }
            uni.navigateTo({
                url: '/pages/orders/orderDetails?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 继续付款
        toPayment (item) {
            const params = {}
            params.orderNum = item.orderNo
            params.orderId = item.orderId
            params.orderStatus = item.orderStatus
            params.totalAmount = item.actualTotalPayAmount // 实付金额  下单时，跳转至收银台页面时，积分已经自动被扣除
            params.isPay = false
            params.source = this.source
            params.pageSymbol = 'myOrder'
            params.source = this.source

            uni.navigateTo({
                url: '/pages/payment/cashPage?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 删除订单记录
        delOrder (orderId) {
            Dialog.confirm({
                message: '确认删除记录'
            }).then(() => {
                deleteOrderApi(orderId).then(res => {
                    if (res.code == 200) {
                        this.pageNum = 1
                        this.total = 0
                        this.orderList = []
                        this.loading = false
                        this.finished = false
                        this.hasMore = true
                        this.getMyOrderList()
                    }
                })
            })
            .catch(() => {
                console.log('cancel')
            })
        },

        // 删除记录---售后单
        delAfterSaleOrderRecord (afterSalesId,item) {
            console.log(afterSalesId,item,'delAfterSaleOrderRecord')
            if(item.afterSalesListStatus == 1){
                Toast({
                    message: '商品正在售后中，请完成售后后再进行删除操作',
                    duration: 3000
                });
                return
            }
            Dialog.confirm({
              message: '确认删除记录'
            }).then(() => {
                deleteAfterSalesOrderApi(afterSalesId).then(res => {
                    if (res.code == 200) {
                        this.activeTab = 5 
                        this.orderStatus = 8
                        this.pageNum = 1
                        this.total = 0
                        this.orderList = []
                        this.loading = false
                        this.finished = false
                        this.hasMore = true
                        this.getMyOrderList()
                    }
                })
            })
            .catch(() => {
                console.log('cancel')
            })
        },

        // 去使用  服务
        toUseService(){
            uni.navigateTo({ url: '/pages/myService/myService' })
        },


        // 以下为待支付
        // 清空已多选项
        clearRowSelection () {
            this.selectedRows = []
            this.selectedRowKeys = []
        },
        // 多选框后的文字的点击事件  +  单选事件、
        // 未点击 管理时要判断disabled    点击之后 不需要判断
        onChange (i, item) {
            // console.log(i, 'i', item)
            item.isChecked = !item.isChecked
            if (item.isChecked === true) {
                this.selectedRowKeys.push(item.orderId)
                this.selectedRows.push(item)
            } else {
                const index = this.selectedRowKeys.indexOf(item.orderId)
                console.log(index, 'indesR')
                this.selectedRowKeys.splice(index, 1)
                this.selectedRows.splice(index, 1)
            }
        },
        // 标记  选择框
        handleCheck (item, e) {
            console.log(item, e, '单选----')

            this.checkAll = this.checked.length === this.orderList.length
            item.isChecked = e.detail

            if (item.isChecked === true) {
                this.selectedRowKeys.push(item.orderId)
                this.selectedRows.push(item)
            } else {
                const index = this.selectedRowKeys.indexOf(item.orderId)
                console.log(index, 'indesR')
                this.selectedRowKeys.splice(index, 1)
                this.selectedRows.slice(index, 1)
            }
        },

        // 去评价
        async toJudge(item){
            const params ={
                source:this.source,
                orderId:item.orderId,
                orderType:item.orderType
            }
            try {
                const res = await getOrderDetailApi(item.orderId)
                if (res.code === 200) {
                    params.productInfoList = res.data.ordeDetailProductInfoList
                    uni.navigateTo({
                        url: '/pages/userJudges/sendJudge?params=' +
                            encodeURIComponent(JSON.stringify(params))
                    })
                }
            }catch (error) {
                console.error('获取订单详情失败:', error)
            }
        },
        
        // 去追评
        async toFollowUpJudge(item){
            const params ={
                source:this.source,
                orderId:item.orderId,
                orderType:item.orderType,
            }
            // 检查 commentIdMap 是否存在
            if (item.commentIdMap) {
                const keys = Object.keys(item.commentIdMap);
                if (keys.length > 0) {
                    // 使用方括号语法获取值
                    params.commentId = item.commentIdMap[keys[0]];
                }
            }
            try {
                const res = await getOrderDetailApi(item.orderId)
                if (res.code === 200) {
                    params.productInfoList = res.data.ordeDetailProductInfoList
                    uni.navigateTo({
                        url: '/pages/userJudges/followUpJudge?params=' +
                            encodeURIComponent(JSON.stringify(params))
                    })
                }
            }catch (error) {
                console.error('获取订单详情失败:', error)
            }
        },
        // 打开确认收货
        openCheckShouhuo (item) {
            console.log(item, 'openCheckShouhuo')
            this.orderId = item.orderId
            this.isShouhuo = true
        },
        // 关闭确认收货弹窗
        closeShouhuo(){
            this.isShouhuo=false
        },
        // 确认收货弹窗确认按钮
        async confirmShouhuo(item){
            this.isShouhuo=false
            console.log(item,'confirmShouhuo')
            this.pageNum = 1
            this.total = 0
            this.orderList = []
            this.loading = false
            this.finished = false
            this.hasMore = true
            this.getMyOrderList()
        },

        // 页面顶部的搜索按钮  跳转搜索页面
        onSearch(){
            uni.navigateTo({
                url:'/pages/orders/searchOrder'
            })
        },

        // 代付款页面  合并付款
        combinePayment(){
            console.log('合并付款',this.selectedRowKeys,this.selectedRows)
            uni.showToast({
                title: '该功能暂未开放',
                icon: 'none',
                duration: 2000
            })
            // const params = {}
            // // params.orderNum = item.orderNo
            // // params.orderId = item.orderId
            // params.orderIdList = this.selectedRowKeys
            // params.orderStatus = 4
            // let CashAmount = 0;
            // let totalPoints =0
            // this.selectedRows.forEach(item => {
            //     CashAmount += item.actualTotalPayAmount || 0;
            //     totalPoints += item.actualTotalPayPoints || 0;
            // });
            // params.totalAmount = CashAmount;
            // params.totalPoints = totalPoints;
            // params.source = this.source
            // uni.navigateTo({
            //     url: '/pages/payment/cashPage?params=' +
            //         encodeURIComponent(JSON.stringify(params))
            // })
        },

        openPopup() {
            this.isPopupVisible=true
        },
        closePopup() {
            this.isPopupVisible=false
        },
        // 申请发票
        showTaxInvoice(){
            this.popupCurrent=0
            this.popoverShow=false
            uni.navigateTo({
                url:'/pages/orders/taxInvoice'
            })
        },
        // 取消订单
        cancelOrder(item){
            this.popupCurrent=1
            this.popoverShow=false
            this.cancelPopup=true
            this.orderId = item.orderId
            this.cancelParams = item
            this.orderType = item.orderType
        },

        // 关闭取消订单原因  并跳转取消订单的详情页面
        closeCancelPopup(isCancel,sign){
            console.log(isCancel,sign,'关闭取消订单')
            this.cancelPopup=false

            if (sign == 'submit') {
                const params = {}
                params.item = this.cancelParams
                params.orderStatus = this.cancelParams.orderStatus
                params.orderNo = this.cancelParams.orderNo
                params.orderId = this.cancelParams.orderId
                params.source = this.source
                if (this.cancelParams.orderType == 1 ){
                    uni.navigateTo({ url: '/pages/orders/awaitUseService?params=' + encodeURIComponent(JSON.stringify(params)) })
                }else{
                    uni.navigateTo({url: '/pages/orders/orderDetails?params=' + encodeURIComponent(JSON.stringify(params)) })
                }
            }
        },

        // // 获取订单列表
        // getMyOrderList(i){
        //     if (this.pageNum > 1 && !this.hasMore) return
        //     this.loading = true
        //     const params = {
        //         pageNum: this.pageNum,
        //         pageSize: this.pageSize,
        //         orderStatus: this.orderStatus
        //     }
        //     console.log(params,'接口分页')
        //     getMyOrderListApi(params.pageNum, params.pageSize, { orderStatus: params.orderStatus }).then((res) => {
        //             this.loading = false
        //             if (res.code === 200) {
        //                 // this.orderList = res.data?.list  || []  
        //                 // this.orderList.push(...this.orderList)
        //                 // this.totalPages = res.data.pages ||0
        //                 // this.total = res.data.total || 0
        //                 if (i && this.pageNum > 1 ) {
        //                     // debugger
        //                     // this.records = res.data?.list  || []  
        //                     // this.orderList.push(...this.records)
        //                     this.orderList = [...this.orderList, ...res.data.list];
        //                 } else {
        //                     // this.records = res.data.list
        //                     // this.orderList = this.records
        //                     this.orderList = res.data.list;
        //                 }
        //                 console.log(this.records,this.orderList,'列表')
        //                 this.totalPages = res.data.pages ||0
        //                 this.total = res.data.total || 0
        //                 this.hasMore = this.pageNum < res.data.pages;
        //                 // 首次加载清空数据，后续加载追加数据
        //                 // this.orderList = this.pageNum === 1
        //                 //     ? newData
        //                 //     : [...this.orderList, ...newData]

        //                 // 判断是否还有更多数据
        //                 // this.hasMore = this.pageNum < this.totalPages

        //                 // this.orderList = res.data|| []
        //                 if (this.orderList.length > 0) {
        //                     this.isOrder = true
        //                     this.list = this.orderList
        //                 } else {
        //                     this.isOrder = false
        //                 }
        //                 this.orderList.forEach(orderItem => {
        //                     this.$set(orderItem, 'flag', false)
        //                 })
        //                 // resolve(res)
        //             }
        //         }).catch(() => {
        //             this.pageNum-- // 重要：加载失败回退页码
        //             this.loading = false
        //             this.hasMore = false
        //         })
        // },
        async getMyOrderList(i) {
            console.log(this.pageNum, 'pageNum',this.hasMore,'hasMore',this.loading,'loading',this.orderList.length,this.total)
            if (this.loading || this.finished) return;
            this.loading = true;
            const params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                orderStatus: this.orderStatus
            };
            if (!i) {
                this.orderList = [];
                this.total = 0;
                this.totalPages = 0;
            }
            return new Promise((resolve, reject) => {
                getMyOrderListApi(params.pageNum, params.pageSize, { orderStatus: this.orderStatus })
                    .then((res) => {
                        if (res.code === 200) {
                            this.total = res.data.total || 0;

                            this.orderList = this.pageNum === 1
                                ? res.data.list || []
                                : [...this.orderList, ...res.data?.list || []];
                            this.finished = this.orderList.length >= this.total;
                            this.pageNum++;
                            console.log(this.orderList, 'this.orderList')
                            this.isOrder = this.orderList.length > 0
                            this.orderList.forEach(orderItem => {
                                this.$set(orderItem, 'flag', false);
                            });
                            resolve(res)
                        } else {
                            reject(res)
                        }
                    })
                    .catch(() => {
                        this.pageNum--; // 重要：加载失败回退页码
                        this.loading = false;
                        // this.hasMore = false;
                    }).finally(() => {
                        this.loading = false;
                        // if (i) {
                        //     this.$nextTick(() => {
                        //         wx.pageScrollTo({
                        //             scrollTop: savedScrollTop,
                        //             duration: 0
                        //         });
                        //     });
                        // }
                    });
            })
        }
    }

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    height: 100vh;
    // padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
}

.scroll-content {
    flex: 1;
    height: 1px;
}

// 没有订单的样式
.noOrderwrapper {
    padding: 50px 24px;
}

.noOrderPic {
    width: 100%;
    text-align: center;

    img {
        width: 81px;
        height: 85px;
    }
}


.orderTip {
    font-weight: bolder;
    font-size: 40rpx;
    text-align: center;
    color: #111111;
}

.description {
    margin-top: 20px;
    text-align: center;
    color: #d4d4d4;
    font-size: 24rpx;
    text-align: center;
}

.noOrderBtn-area {
    padding-top: 100px;

    button[plain] {
        border: none;
    }

    .checkBtn {
        background-color: #FF6203;
        // border: none;
        border-radius: 38px;
        font-size: 28rpx;
        text-align: center;
        color: #FFFFFF;
        height: 76rpx;
        line-height: 74rpx;
        width: 100%;
    }
}



.wrapper {
    height: 100%;
    // padding-top: 44px; /* 预留 NavBar 的高度 */
    // padding-bottom: calc(0rpx + env(safe-area-inset-bottom));

    .cartAd_title {
        padding: 10px 24px 10px 24px;
        font-size: 60rpx;
        text-align: left;
        line-height: 60rpx;
        color: #111111;
    }
}


.orderList_box {
    background-color: #ffffff;
    height: 100vh;
}
.orderList_bg{
    background:#f9f9f9;
    padding-bottom:5px;
}
.orderList {
    padding: 24px 24px 15px 24px;
    background-color: #ffffff;
    width: calc(100% - 48px);

    // 待付款
    .orderTop {
        display: flex;
        align-items: center;
    }

    // 有复选框  右侧商品的样式
    .orderTopRight {
        width: 100%;
    }

    // 已付款
    .listTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .listTopLeft {
            font-size: 26rpx;
            color: #666666;
            line-height: 26rpx;
            text-align: left;
        }

        .listTopRight {
            color: #FF6203;
            text-align: right;
            line-height: 26rpx;
            font-size: 26rpx;
        }
    }

    .goodsDetail {
        margin-top: 11px;
        width: 100%;

        .wraper_left {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 11px;
        }

        .wraper_left:last-child {
            margin-bottom: 0px;
        }

        .wraper_products_info{
            display: flex;
        }
        .goodsPic {
            // width: 33%;
            width: 186rpx;
            height: 186rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // min-height: 200rpx;
            image {
                // width: 100%;
                // height: auto;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
                // border-radius: 10rpx
            }
            img {
                // width: 100%;
                // height: auto;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
                //border-radius: 10rpx
            }
        }

        .goods_tips {
            margin-top: 6px;
            font-size: 22rpx;
            text-align: left;
            color: #888888;
            line-height: 22rpx;
        }
    }

    // 物流
    .logistics {
        background: #f9f9f9;
        display: flex;
        align-items: center;
        padding: 20rpx;
        margin-top: 11px;
        width: calc(100% - 40rpx);


        .logistics_status {
            font-size: 22rpx;
            color: #111111;
            // line-height: 22rpx;
            margin-left: 16rpx;
            width: calc(100% - 54rpx);
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */

        }
        .afterSaleStatus {
            font-size: 22rpx;
            color: #111111;
            margin-left: 16rpx;
        }

        .logistics_detail {
            font-size: 22rpx;
            color: #111111;
            // line-height: 22rpx;
            margin-left: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        // 售后单 售后进度信息
        .refundPocess_detail{
            font-size: 22rpx;
            color: #111111;
            margin-left: 11px;
        }
    }
}

.goodsText {
    position: relative;
    // width: 67%;
    width: calc(100% - 214rpx);
    margin-left: 28rpx;
    // width: 150px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: space-between;
    padding-top: 12rpx;
    padding-bottom: 20rpx;
    text-align: left;

    .goodsText_top {
        display: flex;
        flex-direction: column;
        .goodsTop {
                // position: absolute;
                // top: 2%;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
        
                .goods_T {
                    max-width: 80%;
                    font-size: 28rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 28rpx;
                    // margin-top: 9px;  //display：flex   中 元素居中
                    white-space: nowrap;
                    /* 防止文本换行 */
                    overflow: hidden;
                    /* 超出部分隐藏 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */
                }
        
                // 商品价格
                .goods_price {
                    font-size: 28rpx;
                    // color: #737373;
                    color: #111111;
                    line-height: 28rpx;
                }
            }

        // 规格
        .goodsMiddle {
            margin-top: 20rpx;
            // position: absolute;
            // top: 25%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .goods_specs {
                // margin-top: 7px;
                max-width: 80%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;
                //   line-height: 11px;

                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
            }

            .goods_num {
                font-size: 22rpx;
                line-height: 22rpx;
                color: #666666;
            }
        }
    }



    .goodsText_bottom {
        // position: absolute;
        // bottom: 0%;
        // top: 77%;
        // margin-bottom: 14rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .jifen_box {
            font-size: 28rpx;
            text-align: left;
            color: #111111;
            // line-height: 28rpx;
            // height: 28rpx;
        }
        // .productActualTotalPay{
        //     font-size: 28rpx;
        //     text-align: left;
        //     color: #999999;
        //     line-height: 28rpx;
        //     height: 28rpx;
        // }

        .judgeBtn {
            border: 1px solid #FF6203;
            border-radius: 20px;
            font-size: 24rpx;
            text-align: center;
            color: #FF6203;
            line-height: 24rpx;
            padding: 5px 13px;
        }
    }
}
// 多个商品订单右侧的 价格+数量
.goodsListText{
    width: 20%;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgb(255, 255, 255, 0.66);

    .goods_price{
        color: #333333;
        font-size: 28rpx;
        line-height: 28rpx;
    }
    .goods_num{
        font-size: 22rpx;
        color: #666666;
        line-height: 22rpx;
        margin-top: 24rpx;
    }
}
// 多个商品的样式
.goodsDetailInfo_wrapper{
    display: flex;
    width: 100%;
    margin-bottom: 11px;
}
//一个订单商品超过2个  横向滚动
.goodsListWrapper{
    position: relative;
    width: 80%;
}
.hotSale_content{
    position: relative;
    display: flex;

    .shangpinList{
        // flex: 1;
        width: 26%;
        // margin-bottom: 12px;
        background: #ffffff;
        // width: 121px;
        // height: 226px;
        
        .renqi_img{
            position: relative;
            width: 100%;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // width: 121px;
            // height: 121px;
            // line-height: 121px;

            img{
                width: 100%;
                height: auto;
            }
            image{
                width: 100%;
                height: auto;
            }
        }
        .status_tips {
            position: absolute;
            height: 100%;
            width: 100%;
            background: rgb(0, 0, 0, 0.60);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            font-size: 20rpx;
            color: #ffffff;
            bottom: 0px;
        }

    }
}
// 热卖推荐轮播组件
.top-menu-view {
    display: flex;
    // position: fixed;
    white-space: nowrap;
    width:100%;

    .shangpinList {
        display: inline-block;
        margin-right: 6px;
        position: relative;
    }
}
.fixDiv {
    min-height: 226px;
    width: 10px;
    right: 0px;
    background: linear-gradient(270deg, #ffffff 25.52%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    z-index: 1;
}
.last-top-menu-view {
    // width: calc(100% - 46px);
}
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}


.btnArea {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btnAreaLeft {
        color: #888888;
        font-size: 22rpx;
        line-height: 22rpx;
    }

    .btnAreaRight {
        display: flex;
        justify-content: space-between;

        // 灰字灰框按钮
        .grayBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 28rpx;
            text-align: center;
            color: #D4D4D4;
            height: 62rpx;
            line-height: 60rpx;
            border: 1px solid #D4D4D4;
            padding-left: 10px;
            padding-right: 10px;
            margin-right: 12px;
        }

        // 黑字灰框按钮
        .blackBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 28rpx;
            text-align: center;
            color: #111111;
            height: 62rpx;
            line-height: 60rpx;
            border: 1px solid #D4D4D4;
            padding-left: 10px;
            padding-right: 10px;
        }

        // 黑字黑框按钮
        .blackBlackBtn {
            background-color: #Ffffff;
            border-radius: 38px;
            font-size: 28rpx;
            text-align: center;
            color: #111111;
            height: 62rpx;
            line-height: 60rpx;
            border: 1px solid #111111;
            padding-left: 10px;
            padding-right: 10px;
            min-width: 156rpx;
        }
        // 红字红框
        .submitBtn {
            background-color: transparent;
            border-radius: 38px;
            font-size: 28rpx;
            text-align: center;
            color: #FF6203;
            height: 62rpx;
            line-height: 60rpx;
            border: 1px solid #FF6203;
            padding-left: 10px;
            padding-right: 10px;
        }

        button {
            border: 1px solid #111111;
        }
    }
}



// 气泡卡片
.bubble_card {
    width: 180rpx;
    // max-height: 60vh; /* 防止超出屏幕 */
    // overflow-y: auto; /* 内容过多时显示滚动条 */
    z-index: 1000;
    position: absolute;
    display: inline-block;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 11px;
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.2);
}

.bubble_card::before {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
    top: -10px;
    left: 25%;
    transform: translateX(-50%);
    content: " ";
    position: absolute;
    // box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
//   width: 0;
//   height: 0;
//   border-style: solid;
//   border-width: 0 8px 8px 8px ;
//   border-color: transparent transparent #e10707  transparent;
// //   left: 50%;
// //   margin-left: -5px;
//     top: -8px;
//     filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     // filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
//     // clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* 定义三角形裁剪路径 */
}
// .bubble_card::after {
//     content: "";
//     position: absolute;
//     width: 0;
//     height: 0;
//     border-style: solid;
//     border-width: 0 8px 8px 8px ;
//     border-color: transparent transparent #fff  transparent;
//     top: -8px;
//     -webkit-filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     filter: drop - shadow(0 2px 4px rgba(0,0,0,0.3));
//     z-index: 2;
//     clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* 根据三角形形状调整裁剪路径 */
// }

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.bubble-content {
    text-align: center;
    // padding:0rpx 6rpx;
}
.bubble {
  position: relative;
  background-color: #f2f2f2; /* 气泡窗背景颜色 */
  border-radius: 10px; /* 气泡窗圆角 */
  padding: 10px; /* 气泡窗内边距 */
  box-shadow: 0 0 5px #ccc; /* 气泡窗阴影 */
}
 
.bubble cover-image {
  width: 81px;
  height: 35px;
  position: absolute;
  top: 10px;
//   left: -60px; /* 根据图片大小调整 */
}
 
.bubble text {
  font-size: 22rpx;
  color: #111111;
}

#navBar{
    z-index: 1000;
    position: relative;
    background: white;
    top: 0;
    left: 0;
    right: 0;
    // width: 100%;
    transition: all 0.3s ease;
}
.loading-more {
    padding: 20rpx;
    text-align: center;
    color: #999;
    font-size: 24rpx;
}
.loading-text, .no-more-text {
    padding: 20rpx;
    text-align: center;
    color: #888;
    font-size: 24rpx;
}
.nav_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
::v-deep .van-icon {
    color: #242629 !important;
}

// 文字不用...
::v-deep .van-ellipsis {
    text-overflow: initial !important;
    overflow: auto;
    flex: auto;

}

::v-deep .van-tab {
    z-index: 999;
    font-size: 30rpx !important;
}

::v-deep .van-tab--active {
    // color: #333333 !important;
    font-size: 32rpx !important;
    font-weight: bolder !important;
}

::v-deep .van-button--danger, .van-button--normal, .van-goods-action-button__inner {
    font-weight: normal !important;
}


.r12 {
    margin-right: 12px;
}

.pb {
    padding-bottom: 50px;
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    position: relative;
}
.popup-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}
.popup-text {
    font-size: 22rpx;
    text-align: center;
    color: #111111;
    padding:20rpx;
    background-color: #ffffff;
}
.borderbottom{
    border-bottom: 1px solid #f9f9f9;
}
.activePopup{
    // background-color: #f9f9f9;
    color: #FF6203;
}
.more-btn {
    margin-top: 10px;
    cursor: pointer;
}
.mt10{
    margin-top: 10rpx;
}
::v-deep .van-empty {
    padding: 0rpx;

}
// 添加吸顶样式
::v-deep .van-tabs__wrap--sticky {
    top: 0 !important; /* 使用计算好的导航栏高度 */
    z-index: 999;
    transition: top 0.2s; /* 添加平滑过渡 */
    will-change: top; /* 优化渲染性能 */
}
::v-deep .van-tabs--sticky {
    position: sticky;
    // top: calc(var(--nav-height) + var(--title-height));
    z-index: 100;
    background: white;
    transition: top 0.2s; /* 添加平滑过渡 */
    will-change: top; /* 优化渲染性能 */
}
::v-deep .van-button--info {
    background: #ff6203 !important;
    background-color: #ff6203 !important;
    color: #ffffff;
    border: none !important;
    font-size: 28rpx !important;
    border-radius: 50rpx !important;
    width: 100%!important;
}
</style>
